<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/com.css">
    <title></title>
    <style>
         .date-list span{
            display:block;
            width:0;
            height:0;
            border-width:0 5px 5px;
            border-style:solid;
            border-color:transparent transparent #4fc177;
            position:absolute;
            top:-5px;
            left:50%;/* 三角形居中显示 */
            margin-left:-5px;/* 三角形居中显示 */
        }
         .date-list em{
            display:block;
            width:0;
            height:0;
            border-width:0 5px 5px;
            border-style:solid;
            border-color:transparent transparent #fff;
            position:absolute;
            top:1px;
            left:-5px;
        }
    </style>
</head>
<body>
<div class="my-head">
    <div class="container">
        <div class="col-sm-4">
            <img  class="index-log" src="../../images/index-logo.png">
        </div>
        <div class="col-sm-4 col-sm-push-4 index-hr">
            <div class="col-xs-6 col-xs-pull-1" >
                <form class="form-horizontal">
                    <div class="form-group index-hr-pd">
                        <div class="input-group ver-cen-pad" id="head-input-box">
                            <label for="index-search" class="sr-only">Search</label>
                            <input id="index-search" class="form-control" type="text">
                            <div class="input-group-btn index-search-icon"><button type="submit" class="btn" ><img class="search-btn" src="../../images/search-icon.png"></button></a></div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-xs-6 index-hr-pd ab-l">
                <div class="ver-cen-pad">
                    <button class="btn btn-default login-btn">登录</button>
                    <button class="btn btn-default register-btn">注册</button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="user-set-info">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-push-3 user-set-box">
                <form role="form" class="form-horizontal user-detail-form">
                    <div class="form-head">
                        <h4>帐号设置</h4>
                        <label for="user-head-img"  class="control-label head-img-label" ><img id="result" src="../../images/head-im-icon.png" /></label>
                        <input type="file" id="user-head-img" name="head-img">
                        <p>个人资料</p>
                    </div>
                    <div class="form-group">
                        <label for="user-ph-num" class="col-md-3 col-sm-3 control-label">电话号码</label>
                        <div class="col-md-9 col-sm-9">
                            <input id="user-ph-num" class="form-control" type="tel" maxlength="11" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="user-name" class="col-md-3 col-sm-3 control-label">用户名</label>
                        <div class="col-md-9 col-sm-9">
                            <input id="user-name" class="form-control" type="text" maxlength="11" />
                        </div>
                    </div>
                    <div class="form-group p-r">
                        <label for="user-real-name" class="col-md-3 col-sm-3 control-label">真实姓名</label>
                        <div class="col-md-9 col-sm-9">
                            <input id="user-real-name" class="form-control" type="text" maxlength="11" />
                        </div>
                        <div class="tips">
                            <span class="reg"></span>真实姓名一旦保存不可更改
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="sex-lb-head">性别</label>
                        <label for="male" class="control-label ck-box">
                        <input type="radio" name="sex" id="male">男</label>
                        <label for="female" class="control-label ck-box">
                        <input type="radio" name="sex" id="female">女</label>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 col-sm-3 control-label">生日</label>
                        <div class="col-md-9 col-sm-9">
                            <div class="date-content">
                                <ul class="date-list list-y">
                                    <span><em></em></span>
                                    <div>
                                    </div>
                                </ul>
                                <input id="date-y" class="b-date" type="text" value="2016"><label>年</label>
                            </div>

                            <div class="date-content">

                                <ul class="date-list list-m">
                                    <span><em></em></span>
                                    <div>
                                        <li>1</li>
                                        <li>2</li>
                                        <li>3</li>
                                        <li>4</li>
                                        <li>5</li>
                                        <li>6</li>
                                        <li>7</li>
                                        <li>8</li>
                                        <li>9</li>
                                        <li>10</li>
                                        <li>11</li>
                                        <li>12</li>
                                    </div>
                                </ul>
                                <input id="date-m" class="b-date" type="text" value="4"><label>月</label>
                            </div>

                            <div class="date-content">

                                <ul class="date-list list-d">
                                    <span><em></em></span>
                                    <div>
                                        <li>1</li>
                                        <li>2</li>
                                        <li>3</li>
                                        <li>4</li>
                                        <li>5</li>
                                        <li>6</li>
                                        <li>7</li>
                                        <li>8</li>
                                        <li>9</li>
                                        <li>10</li>
                                        <li>11</li>
                                        <li>12</li>
                                        <li>13</li>
                                        <li>14</li>
                                        <li>15</li>
                                    </div>
                                </ul>
                                <input id="date-d" class="b-date" type="text" value="8"><label>日</label>

                            </div>
                        </div>

                    </div>
                    <div class="form-group">
                        <label for="user-email" class="col-md-3 col-sm-3 control-label">电子邮箱</label>
                        <div class="col-md-9 col-sm-9">
                            <input id="user-email" class="form-control" type="email"  />
                        </div>
                    </div>
                    <button type="button" class="btn save">保 存</button>
                    <div class="form-head">
                        <p>密码</p>
                    </div>
                    <div class="form-group">
                        <label for="user-cur-psd" class="col-md-3 col-sm-3 control-label">当前密码</label>
                        <div class="col-md-9 col-sm-9">
                            <input id="user-cur-psd" class="form-control" type="password" maxlength="11" autocomplete="off" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="user-new-psd" class="col-md-3 col-sm-3 control-label">新密码</label>
                        <div class="col-md-9 col-sm-9">
                            <input id="user-new-psd" class="form-control" type="password" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="user-confirm-psd" class="col-md-3 col-sm-3 control-label">确认新密码</label>
                        <div class="col-md-9 col-sm-9">
                            <input id="user-confirm-psd" class="form-control" type="password"  />
                        </div>
                    </div>
                    <button type="button" class="btn save ad-mrg">保 存</button>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-9">
                <h4 class="foot-title">联系方式</h4>
                <ul class="my-list foot-list">
                    <li>010-5653 8600</li>
                    <li>北京市朝阳区大屯东路名人公寓</li>
                    <li>media@zhigan-mail.com</li>
                </ul>
                <h5 class="foot-title-se">中国青少年科技辅导员协会 合作网站</h5>
                <p class="foot-clr">Copyright 2015 备案号 京备2016123445678899</p>
            </div>
            <div class="col-md-3">
                <div class="col-xs-10">
                    <img src="../../images/index-wc-icon.png">
                </div>
            </div>
        </div>
    </div>

</div>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script>
    $(function(){
        var rYear = null;
        $("#user-real-name").focus(function(){
            $(".tips").fadeIn();
        });
        $("#user-real-name").blur(function(){
            $(".tips").fadeOut();
        });
        $(".user-agree").click(function () {
            $(this).toggleClass("ag-check");
        });
        var result = document.getElementById("result");
        var input = document.getElementById("user-head-img");

        if(typeof FileReader === 'undefined'){
            result.innerHTML = "抱歉，你的浏览器不支持 FileReader";
            input.setAttribute('disabled','disabled');
        }else{
            input.addEventListener('change',readFile,false);
        }
        $(".b-date").focus(function(){
           $(this).parent().find(".date-list").show();
        });
        $(".b-date").change(function(){
            console.log(1);
        })
    });
    (function(){
        var sYear = 1970;
        var html = '';
        for( var i = 0;sYear <= 2016; i++) {
            html += '<li>' + sYear + '</li>';
            sYear++;
        }
        $(".list-y div").append(html);
        bindEvent();
    })();

    function bindEvent() {
        $(".date-list li").on("click",function(){
            var content = $(this).text();
            var $parent = $(this).parent().parent();
            $parent.next().val(content);
            $parent.hide();
            $parent.parent().addClass("date-choose");
            if($parent.hasClass("list-y")) {
                setDays();
            }
            if($parent.hasClass("list-m")) {
                setDays(content);
            }
        });
    }

    function setDays(month) {
        is_leap($(".list-y").val());
        var m = month || $("#date-m").val();
        if(rYear) {
            if(m == 2) {
                renderDays(29);
            } else if(m == 1|| m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
                renderDays(31);
            } else {
                renderDays(30);
            }
        } else if(!rYear) {
            if(m == 2) {
                renderDays(28);
            } else if(m == 1|| m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
                renderDays(31);
            } else {
                renderDays(30);
            }
        }
    }

    function renderDays(times) {
        var i = 1;
        var html = '';
        for(;i <= times;i++) {
            html += '<li>' + i + '<li>';
        }
        $(".list-d div").html(html);
        bindEvent();
    }
    function is_leap(year) {
        //闰年的条件是符合下面二者之一：
        //(1)年份能被4整除，但不能被100整除；
        //(2)年份能被400整除。
        if((year%4==0 && year%100!=0)||(year%400==0)){
            rYear = true
        }
        rYear = false;
    }
    function readFile(){
        var file = this.files[0];
        if(!/image\/\w+/.test(file.type)){
            alert("文件必须为图片！");
            return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(e){
            $("#result").attr("src", this.result);
        }
    }
</script>
</body>
</html>